<script setup lang="ts">
import { RouterView } from 'vue-router'
import Navbar from './components/Navbar.vue'

// 处理用户菜单项点击事件
const handleMenuItemClick = (item: { label: string }) => {
  console.log('用户点击了菜单项:', item.label);
  // 这里可以添加相应的逻辑处理
  if (item.label === '退出登录') {
    // 处理退出登录逻辑
    alert('确认退出登录？');
  }
};
</script>

<template>
  <div class="app">
    <Navbar 
      title="导航系统"
      username="张三"
      :navLinks="[
        { label: '首页', path: '/' },
        { label: '关于', path: '/about' },
        { label: '产品', path: '/products' },
        { label: '服务', path: '/services' }
      ]"
      @menu-item-click="handleMenuItemClick"
    />
    <main class="main-content">
      <RouterView />
    </main>
  </div>
</template>

<style scoped>
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 20px;
  background-color: #f5f5f5;
}
</style>
